<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>translate</title>
    <style type="text/css">
        p{
            font-size: 15px;
            color: red;
            font-weight: bold;
        }
        #box1{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .box1{
            transform: skew(30deg,20deg);
            -webkit-transform:skew(30deg,20deg);
            -moz-transform:skew(30deg,20deg);
            -ms-transform:skew(30deg,20deg);
        }
        .box2{
            transform: skew(20deg);
            -webkit-transform:skew(20deg);
            -moz-transform:skew(20deg);
            -ms-transform:skew(20deg);
        }
        .box3{
            transform: skew(30deg);
            -webkit-transform:skew(30deg);
            -moz-transform:skew(30deg);
            -ms-transform:skew(30deg);
        }
        .box4{
            transform: skew(130deg,20deg);
            -webkit-transform:skew(130deg,20deg);
            -moz-transform:skew(130deg,20deg);
            -ms-transform:skew(130deg,20deg);
        }
        .box5{
            transform: skew(30deg,120deg);
            -webkit-transform:skew(30deg,120deg);
            -moz-transform:skew(30deg,120deg);
            -ms-transform:skew(30deg,120deg);
        }
    </style>
</head>
<body>
<p>css属性：</p>
transform
<br/>
<input type="radio" onclick="fn1()" name="se"/>skew(30deg,20deg)
<br/>
<input type="radio" onclick="fn2()" name="se"/>skew(20deg)
<br/>
<input type="radio" onclick="fn3()" name="se"/>skew(30deg)
<br/>
<input type="radio" onclick="fn4()" name="se"/>skew(130deg,20deg)
<br/>
<input type="radio" onclick="fn5()" name="se"/>skew(30deg,120deg)
<br/>
<p>结果</p>
<div id="box1">
    <div id="box2"></div>
</div>
</body>
<script type="text/javascript">
    function fn1(){
        var box2=document.getElementById("box2");
        box2.className="box1"
    }
    function fn2(){
        var box2=document.getElementById("box2");
        box2.className="box2"
    }
    function fn3(){
        var box2=document.getElementById("box2");
        box2.className="box3"
    }
    function fn4(){
        var box2=document.getElementById("box2");
        box2.className="box4"
    }
    function fn5(){
        var box2=document.getElementById("box2");
        box2.className="box5"
    }
    function fn6(){
        var box2=document.getElementById("box2");
        box2.className="box6"
    }
    function fn7(){
        var box2=document.getElementById("box2");
        box2.className="box7"
    }
    function fn8(){
        var box2=document.getElementById("box2");
        box2.className="box8"
    }
</script>
</html>>